<template>
	<view style="position: relative; height: 100vh;">
		<view style="display: flex; padding: 20rpx;">
			<image src="../../static/img/au_start.png" style="height: 200rpx; width: 70%;" mode="aspectFit"></image>
		</view>

		<view style="display: flex;justify-content: center;flex-wrap: wrap;">
			<!-- 为这个view添加点击事件和动态类名绑定，第一个默认选中 -->
			<view @click="toggleSelected('farmer')" :class="{'selected': selected === 'farmer'}" style="display: flex; justify-content: center; flex-direction: row; flex-wrap: nowrap; z-index: 1;height: 150rpx;
            width: 85%;background-color: rgb(245,245,245);padding: 30rpx;border-radius: 10rpx;">
				<image src="../../static/img/Mask_group.png" style="height: 150rpx;width: 150rpx;border-radius: 100%;">
				</image>
				<view
					style="display: flex;flex-direction: column;line-height: 70rpx;padding: 10rpx;padding-left: 40rpx;">
					<view style="font-size: 35rpx; font-weight: 700;"
						:style="{ color: selected === 'farmer' ? 'white' : 'black' }">
						我是农户
					</view>
					<view style="font-size: 30rpx;font-weight: 500;" :style="{ color: selected === 'farmer' ? 'white' : 'black' }">提供农活找人工、农务发布</view>
				</view>
			</view>

			<view @click="toggleSelected('machinery')" :class="{'selected': selected === 'machinery'}" style="display: flex; justify-content: center; flex-direction: row; flex-wrap: nowrap; z-index: 1;height: 150rpx;
            width: 85%;background-color: rgb(245,245,245);padding: 30rpx;border-radius: 10rpx;margin-top: 80rpx;">
				<image src="../../static/img/Mask_group2.png" style="height: 150rpx;width: 150rpx;border-radius: 100%;">
				</image>
				<view
					style="display: flex;flex-direction: column;line-height: 70rpx;padding: 10rpx;padding-left: 40rpx;">
					<view style="font-size: 35rpx;font-weight: 700;" :style="{ color: selected === 'farmer' ? 'black'  : 'white ' }">我是农机服务者</view>
					<view style="font-size: 30rpx;font-weight: 500;" :style="{ color: selected === 'farmer' ? ' black' : 'white' }">提供农机干农活、农机发布</view>
				</view>
			</view>
		</view>
		
		<view class="red_fonts_waring">
		  <text>*请确认身份信息如有误，请重新上传或手动修正</text>  
		</view> 
		
		<view style="display: flex;padding: 30rpx;">
			<view style="position: relative; z-index: 2;width: 40%;">
			  <u-button type="error" text="跳过"></u-button>  
			</view>
			
			<view style="position: relative; z-index: 2;width: 60%;padding-left: 20rpx;">
			  <u-button color="#4BA367" text="下一步"></u-button>  
			</view>
			
		</view>

		<!-- 背景图，z-index 设置为较低的值使其位于底层 -->
		<image src="../../static/img/background.png"
			style="position: absolute; bottom: 0; height: 500rpx; width: 100%; z-index: 0;"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected: 'farmer' // 初始化为'farmer'，使第一个元素默认选中
			};
		},
		methods: {
			toggleSelected(type) {
				this.selected = type; // 根据点击的类型更新选中状态
			}
		}
	};
</script>

<style scoped lang="scss">
	.font_class {
		font-size: 30rpx;
	}

	.red_fonts_waring {
		position: relative;
		z-index: 2;
		color: #ff4d4d;
		text-align: center;
		font-feature-settings: 'case' on;
		font-family: var(--Font-Family, "PingFang SC");
		padding-top: 20rpx;
		font-size: 26rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 7.5rem;
		/* 125% */
		letter-spacing: var(--Letter-Spacing-Subheadline, -0.12rem);
	}

	/* 定义选中状态的样式类 */
	.selected {
		background-color: seagreen !important;
		color: white !important;
	}
</style>